import React from "react";
import MovieViewModel from "./movies/MoviesViewModel";
import {
  Button,
  Carousel,
  Empty, Grid,
  List,
  Modal,
  Spin,
  Switch
} from "@arco-design/web-react";
import Text from "@arco-design/web-react/es/Typography/text";
const Row = Grid.Row;
const Col = Grid.Col;
const imageSrc = [
  'https://tanju.vip/pic/uploadimg/2024-6/p2908192678.jpg',
  'https://tanju.vip/pic/uploadimg/2024-9/p2911624909.jpg',
  '//p1-arco.byteimg.com/tos-cn-i-uwbnlip3yd/0265a04fddbd77a19602a15d9d55d797.png~tplv-uwbnlip3yd-webp.webp',
  '//p1-arco.byteimg.com/tos-cn-i-uwbnlip3yd/24e0dd27418d2291b65db1b21aa62254.png~tplv-uwbnlip3yd-webp.webp',
];
function Hello() {
  const [visible, setVisible] = React.useState(false);
  const [textChecked, setChecked] = React.useState(false);

  const onChange = (checked: boolean) => {
    setChecked(checked);
    console.log(`switch to ${checked}`);
  };
  return (
    <Col>
      <h1>electron-react-boilerplate</h1>
      <Row>
        <Spin
          style={{
            width: "100%",
            alignContent: "center"
          }}
        />
        <Switch style={{ width: 40 }} defaultChecked onChange={onChange} />
        <Text style={{ marginLeft: 20, color: "red" }}>
          {textChecked ? "Checked" : "Unchecked"}
        </Text>
        <Button
          className="button"
          type="primary"
          onClick={() => setVisible(true)}
        >
          Hello Arco
        </Button>
        <Empty
          imgSrc="//p1-arco.byteimg.com/tos-cn-i-uwbnlip3yd/a0082b7754fbdb2d98a5c18d0b0edd25.png~tplv-uwbnlip3yd-webp.webp"
          description={<Button type="primary">Refresh</Button>}
        />
      </Row>
      <Carousel
        style={{ width: 600, height: 240 }}
        autoPlay
        indicatorType="slider"
        showArrow="hover"
      >
        {imageSrc.map((src, index) => (
          <div>
            <img
              src={src}
              style={{ width: "100%", height: "fit-content" }}
              alt="dd"
            />
          </div>
        ))}
      </Carousel>
      <Modal
        title="Modal Title"
        visible={visible}
        onOk={() => setVisible(false)}
        onCancel={() => setVisible(false)}
        autoFocus={false}
        focusLock
      >
        <p>
          You can customize modal body text by the current situation. This modal
          will be closed immediately once you press the OK button.
        </p>
      </Modal>
    </Col>
  );
}
export default Hello;
